<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/step.css" media="all">
    <style>
        .layui-form-item{
            width: 50% !important;
            float: left;
            margin-right: 0px;
            clear: none;
        }
        .layui-input-block{
            margin-left: 150px;
        }
        .layui-input-block .layui-icon-date{
            position: absolute;
            top:10px;
            left: 10px;
        }
        .layui-input-block .layui-icon-date+input{
            padding-left: 30px;
        }
        .layui-step-content-item{
            background-color: transparent;
        }
    </style>
</head>
<body>
    <div class="layui-fluid">
        <div class="title-row">资材信息导入</div>
        <div class="layui-step" id="step">
            <div class="layui-step-content layui-clear">
                <div class="layui-step-content-item" style="background-color: #ECEDF2;margin: 15px auto 30px; padding: 24px;">
                    <div class="layui-row">
                        <div class="layui-col-md11">
                            <input id="searchText" type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
                        </div>
                        <div class="layui-col-md1" style="text-align:right;">
                            <button onclick="searchFMc()" id="searchBtn" class="layui-btn layuiadmin-btn-replys layui-icon layui-icon-search layuiadmin-button-btn" data-type="reload" lay-submit lay-filter="LAY-app-forumreply-search">
                               查询
                            </button>
                        </div>
                    </div>
                    <div class="layui-row layui-col-space10" style="margin-top: 16px" id="searchList">
                        <div class="layui-col-md4 " style="padding-left: 8px; padding-right: 8px;" >
                            <div class="importItem1 importItem"><ul></ul></div> 
                        </div>
                        <div class="layui-col-md4 " style="padding-left: 8px; padding-right: 8px;" >
                            <div class="importItem2 importItem"><ul> </ul></div>   
                        </div>
                        <div class="layui-col-md4 " style="padding-left: 8px; padding-right: 8px;" >
                            <div class="importItem3 importItem"><ul></ul></div> 
                        </div>
                    </div>
                </div>
                <div class="layui-step-content-item">
                    <div class="details-form">
                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                              <label class="layui-form-label">资材编号</label>
                              <div class="layui-input-block">
                                <input type="text" name="ZC_CODE"  lay-verify="required"  autocomplete="off" class="layui-input">
                              </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">规格型号</label>
                                <div class="layui-input-block">
                                    <input type="text" name="ZC_MODEL"  lay-verify="required"  autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">所属站点</label>
                                <div class="layui-input-block">
                                    <select name="STATION_ID" id="divisionsel" lay-filter='divisionsel'>
                                        <option value="">请选择</option>
                                    </select>
                                </div>
                            </div> <div class="layui-form-item">
                            <label class="layui-form-label">线路编号</label>
                            <div class="layui-input-block">
                                <input type="text" name="LINE_ID"  lay-verify="required"  autocomplete="off" class="layui-input">
                            </div>
                        </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">供应商</label>
                                <div class="layui-input-block">
                                    <input type="text" name="ZC_SUPPLIER"  lay-verify="required"  autocomplete="off" class="layui-input">
                                </div>
                            </div> <div class="layui-form-item">
                            <label class="layui-form-label">制作商</label>
                            <div class="layui-input-block">
                                <input type="text" name="ZC_PRODUCT" lay-verify="required"  autocomplete="off" class="layui-input">
                            </div>
                        </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">出厂日期</label>
                                <div class="layui-input-block">
                                    <i class="layui-icon layui-icon-date"></i>
                                    <input type="text" name="CREATED_TIME" lay-verify="required"  autocomplete="off" class="layui-input" id="productionDate">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">保修期至</label>
                                <div class="layui-input-block">
                                    <i class="layui-icon layui-icon-date"></i>
                                    <input type="text" name="DATE_OF_PRODUCTION" lay-verify="required"  autocomplete="off" class="layui-input" id="guaranteeDate">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">产品序列号</label>
                                <div class="layui-input-block">
                                    <input type="text" name="SERIAL_NUMBER" required lay-verify="required"  autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">安装位置</label>
                                <div class="layui-input-block">
                                    <input type="text" name="INSTALL_LOCATION" required lay-verify="required"  autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">安装日期</label>
                                <div class="layui-input-block">
                                    <i class="layui-icon layui-icon-date"></i>
                                    <input type="text" name="INSTALL_DATE" lay-verify="required"  autocomplete="off" class="layui-input" id="installDate">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">专业类别编号</label>
                                <div class="layui-input-block">
                                    <input type="text" name="PROFESSIONAL_ID" required lay-verify="required"  autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">所属单位</label>
                                <div class="layui-input-block">
                                    <input type="text" name="OWNER" required lay-verify="required"  autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">额定电压</label>
                                <div class="layui-input-block">
                                    <input type="text" name="VOLTAGE" required lay-verify="required"  autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">额定功率</label>
                                <div class="layui-input-block">
                                    <input type="text" name="POWER" required lay-verify="required"  autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">使用寿命</label>
                                <div class="layui-input-block">
                                    <input type="text" name="LIFE" required lay-verify="required"  autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">首次维修计划日期</label>
                                <div class="layui-input-block">
                                    <i class="layui-icon layui-icon-date"></i>
                                    <input type="text" name="FIRST_MAINTENANCE_PLAN" lay-verify="required"  autocomplete="off" class="layui-input" id="firstRepairDate">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">本次维护计划日期</label>
                                <div class="layui-input-block">
                                    <i class="layui-icon layui-icon-date"></i>
                                    <input type="text" name="CURRENT_MAINTENANCE_PLAN" lay-verify="required"  autocomplete="off" class="layui-input" id="repairDate">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">下次维护计划日期</label>
                                <div class="layui-input-block">
                                    <i class="layui-icon layui-icon-date"></i>
                                    <input type="text" name="NEXT_MAINTENANCE_PLAN" lay-verify="required"  autocomplete="off" class="layui-input" id="nextRepairDate">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">距离下次维护计划时间（天）</label>
                                <div class="layui-input-block">
                                    <input type="text" name="DISTANCE_MAINTENANCE_PLAN"  lay-verify="required"  autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">距离下次维护计划时间（天）</label>
                                <div class="layui-input-block">

                                    <select name="IS_MAINTENANCE_PLAN" lay-verify="required">
                                        <option value="">请选择</option>
                                        <option value="是">是</option>
                                        <option value="否">否</option>
                                    </select>

                                </div>
                            </div>
                            <div class="layui-form-item">
                              <label class="layui-form-label">资材名称</label>
                              <div class="layui-input-block">
                                <input type="text" name="ZC_NAME"  lay-verify="required"  autocomplete="off" class="layui-input">
                              </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">资材大类编号</label>
                                <div class="layui-input-block">
                                    <input type="text" name="ZC_TYPE_ID"  lay-verify="required"  autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">资材小类编号</label>
                                <div class="layui-input-block">
                                    <input type="text" name="ZC_SUB_TYPE_ID"  lay-verify="required"  autocomplete="off" class="layui-input">
                                </div>
                            </div>
                          </form>
                    </div>
                </div>
                <div class="layui-step-content-item">
                    <div class="layui-form-item">
                        <input type="button" lay-submit lay-filter="layuiadmin-app-input-submit" id="layuiadmin-app-input-submit" value="确认录入" class="layui-btn">
                    </div>
                </div>
            </div>
                <div class="layui-step-btn">
                    <div class="layui-btn-group">
                        <button class="layui-btn prev">上一步</button>
                        <button class="layui-btn next">下一步</button>
                    </div>
                </div>
            </div>
    </div>
    <script src="../../layuiadmin/layui/layui.js"></script> 
    <script>
        var fMcIdIndex;
        layui.config({
            base: '../../layuiadmin/' //静态资源所在路径
            }).extend({
                index: 'lib/index' //主入口模块
            , my_send: '../myModules/my_send'
            }).use(['index', 'form','step','my_send'], function(){
                var $ = layui.$
                ,step = layui.step
                ,form = layui.form
                ,my_send = layui.my_send,
                http_proxy = layui.http_proxy;
                step.render({
                elem: '.layui-step',
                isOpenStepLevel: true,
                title:["选择分类","填写资材详情","录入成功"]
            });
            $(".prev").on("click",function() {
                step.prev();
            });
            $(".next").on("click",function() {
                step.next();
            });
            $.ajax({
                url: http_proxy('/mcIn/getFMcByParams'),
                type:'GET',
                datatype:'json',
                async:false,
                success:function(data){
                    var str = '';
                    $.each( data.grid.rows, function (i, item){
                        str += '<li onclick = "demoTest('+item.fMcId+');">' +item.fMcName + '<i class="layui-icon layui-icon-next"></i></li>'
                    })
                    $('.importItem1 ul').html(str);
                    
                }
            })
        });
        function searchFMc(){
            var $ = layui.$
            var searchStr = $("#searchText").val();
            $('.importItem1 ul').empty();
            $('.importItem2 ul').empty();
            $('.importItem3 ul').empty();
            $.ajax({
                url: http_proxy('/mcIn/getFMcByParams'),
                type:'GET',
                datatype:'json',
                async:false,
                data:{"fMcShowName":searchStr},
                success:function(data){
                    if(data.grid.rows==null||data.grid.rows==""){
                        $('.importItem1 ul').children().filter('li').remove();
                    }
                    var str = '';
                    $.each( data.grid.rows, function (i, item){
                        str += '<li>' +item.fMcShowName + '<i class="layui-icon layui-icon-next"></i></li>'
                        if(item.fLevel == 0){
                            $('.importItem1 ul').append(str);
                            // var indexParamesSearch1 = item.fMcShowName+'!#!%!'+item.fMcId+'!#!%!'+item.fParent;
                            $('.importItem1 ul li').attr("onclick","demoTest("+"'"+item.fMcId+"'"+")");
                        }else if(item.fLevel == 1){
                            $('.importItem2 ul').append(str);
                            // var indexParamesSearch2 = item.fMcShowName+'-***-'+item.fMcId+'-***-'+item.fParent;
                            $('.importItem2 ul li').attr("onclick","demoTestt("+"'"+item.fMcId+"'"+")");
                        }else{
                            $('.importItem3 ul').append(str);
                            // var indexParamesSearch3 = item.fMcShowName+'-***-'+item.fMcId+'-***-'+item.fParent;
                            $('.importItem3 ul li').attr("onclick","demoTesttt("+"'"+item.fMcId+"'"+")");
                        }
                    })
                }
            })
        }
        
        
        
        function demoTest(id){
            var $ = layui.$
            fMcIdIndex = id;
            $('.importItem3 ul').empty();
            console.log($(this))
            $(this).addClass('active');
            $.ajax({
                url: http_proxy('/mcIn/getFMcByParams?fMcShowName=&fParent=') + id,
                type:'GET',
                datatype:'json',
                async:false,
                success:function(data){
                    var str = '';
                    $.each( data.grid.rows, function (i, item){
                        str += '<li onclick = demoTestt("'+ item.fMcId +'")>' +item.fMcName + '<i class="layui-icon layui-icon-next"></i></li>'
                    })
                    $('.importItem2 ul').html(str);
                }
            })
        }
        function demoTestt(idd){
            var $ = layui.$
            fMcIdIndex=idd;
            $(this).addClass('active');
            $.ajax({
                url: http_proxy('/mcIn/getFMcByParams?fMcShowName=&fParent=') + idd,
                type:'GET',
                datatype:'json',
                async:false,
                success:function(data){
                    var str = '';
                    $.each( data.grid.rows, function (i, item){
                        str += '<li onclick = demoTesttt("'+ item.fMcId +'")>' +item.fMcName + '<i class="layui-icon layui-icon-next"></i></li>'
                    })
                    $('.importItem3 ul').html(str);
                }
            })
        }
        function demoTesttt(iddd){
            var $ = layui.$
            fMcIdIndex=iddd;
        }
    </script>

    <script type="text/javascript">
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            //常规用法
            laydate.render({
                elem: '#productionDate',
            });
            laydate.render({
                elem: '#guaranteeDate',
            });
            laydate.render({
                elem: '#installDate',
            });
            laydate.render({
                elem: '#firstRepairDate',
            });
            laydate.render({
                elem: '#repairDate',
            });
            laydate.render({
                elem: '#nextRepairDate',
            });
        })
    </script>
</body>
</html>